<template>
	<div class="front_my_schedule">
		<a-tabs v-model="activeName">
			<a-tab-pane v-for="(item, index) in scheduleDatas" :key="index" :title="item.label" />
		</a-tabs>
		<a-list :bordered="false" :data="dataSource">
			<template #item="{ item }">
				<a-list-item class="list-demo-item" action-layout="vertical">
					<template #meta>事项：{{ item.title }}</template>
					<a-list-item-meta :title="`人员：${item.title}`" :description="`地点：${item.description}`" />
					<template #actions>
						<p>
							<icon-calendar />
							{{ item.dateTime }}
						</p>
						<a-button type="text" @click="handleUpdateSchedule(item)">修改</a-button>
						<a-button type="text" @click="handleDeleteSchedule(item)">删除</a-button>
					</template>
				</a-list-item>
			</template>
		</a-list>
	</div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import weekOfYear from 'dayjs/plugin/weekOfYear';
dayjs.extend(weekOfYear);
interface weekItem {
	label: string;
}
const activeName = ref(0);
function formatWeekDate(year: number, week: number) {
	let weekData = dayjs(`${year}`).week(week);
	let weekEndDate = weekData.endOf('week').day(7);
	let weekStartDate = weekData.startOf('week').day(1);
	return {
		label: `${weekStartDate.format('MM.DD')} ~ ${weekEndDate.format('MM.DD')}`,
		start: weekStartDate.format('YYYY-MM-DD'),
		end: weekEndDate.format('YYYY-MM-DD')
	};
}
const emit = defineEmits(['update']);
const scheduleDatas = computed(() => {
	let weeks: weekItem[] = [];
	let endDate = dayjs('2025-01-15');
	let startDate = dayjs('2025-01-15').subtract(3, 'month');
	if (endDate.year() === startDate.year()) {
		let weekCount = endDate.week() - startDate.week();
		Array.from({ length: weekCount + 1 }, (_, i) => {
			weeks.push(formatWeekDate(endDate.year(), startDate.week() + i));
		});
	} else {
		let yearAfter = endDate.year();
		let yearBefore = startDate.year();
		let yearAfterWeek = endDate.week();
		let yearBeforeWeek = startDate.week();
		let weekCountBefore = 52 - yearBeforeWeek + 1;
		Array.from({ length: weekCountBefore }, (_, i) => {
			weeks.push(formatWeekDate(yearBefore, yearBeforeWeek + i));
		});
		Array.from({ length: yearAfterWeek }, (_, i) => {
			weeks.push(formatWeekDate(yearAfter, i + 1));
		});
	}
	return weeks;
});
const dataSource = computed(() => {
	return Array.from({ length: 10 }, (_, i) => {
		return {
			id: i + 1,
			title: `Ant Design Title ${i}`,
			description: `Ant Design Subtitle ${i}`,
			dateTime: `${dayjs().format('YYYY-MM-DD HH:mm:ss')}`
		};
	});
});

//更新日程
const handleUpdateSchedule = (item: any) => {
	emit('update', item);
};

const handleDeleteSchedule = (item: any) => {
	console.log(item);
};
</script>

<style lang="scss" scoped>
.front_my_schedule {
	:deep(.arco-tabs-content) {
		padding: 0;
	}
	:deep(.arco-list-item-action) {
		p {
			color: var(--color-text-3);
		}
		button.arco-btn-text {
			height: 22px;
			padding: 0 6px;
		}
	}
}
</style>
